<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        input[type="text"] { width: 300px; }
    </style>
    <script type="text/javascript" src="https://unpkg.com/centrifuge@^5/dist/centrifuge.js"></script>
    <script type="text/javascript">
        const channel = "blink182";

        window.addEventListener('load', function() {
            const container = document.getElementById('messages');

            const centrifuge = new Centrifuge('ws://' + window.location.host + '/connection/websocket');

            centrifuge.on('connecting', function(ctx){
                drawText('Connecting: ' + ctx.reason);
            });

            centrifuge.on('disconnected', function(ctx){
                drawText('Disconnected: ' + ctx.reason);
            });

            // bind listeners on centrifuge object instance events.
            centrifuge.on('connected', function(ctx){
                drawText('Connected with client ID ' + ctx.client + ' over ' + ctx.transport);
            });

            centrifuge.on('subscribed', function(ctx) {
                drawText('Subscribe to server-side channel ' + ctx.channel);
            });

            centrifuge.on('subscribing', function(ctx) {
                drawText('Subscribing to server-side channel ' + ctx.channel);
            });

            centrifuge.on('unsubscribed', function(ctx) {
                drawText('Unsubscribe from server-side channel ' + ctx.channel);
            });

            centrifuge.connect();

            function drawText(text) {
                let e = document.createElement('li');
                e.innerHTML = [(new Date()).toString(), ' ' + text].join(':');
                container.insertBefore(e, container.firstChild);
            }

            window.addEventListener('click', function () {
                centrifuge.rpc('trigger_resubscribe', {});
            });
        });
    </script>
</head>
<body>
<ul id="messages"></ul>
</body>
</html>
